<template>
    <!-- 上传头像图片的组件 -->
    <div class="avatar-upload">
        <div class="avatar-show">
            <!-- 有值则展示拷贝好的本地图片缩略图 -->
            <template v-if="props.modelValue">
                <el-image v-if="preview" :src="localFile" fit="scale-down"></el-image>
                <el-upload v-else name="file" :show-file-list="false"
                    accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP" :multiple="false"
                    :http-request="uploadImage">
                    <ShowLocalImage :fileId="props.modelValue" partType="avatar" :width="40"
                        :forceGet="avatarInfoStore.getForceReload(props.modelValue)"></ShowLocalImage>
                </el-upload>
            </template>
            <!-- 没有值则等待上传图片 -->
            <template v-else>
                <el-upload name="file" :show-file-list="false"
                    accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP" :multiple="false"
                    :http-request="uploadImage">
                    <span class="iconfont icon-ic_image_upload"></span>
                </el-upload>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, computed } from "vue"
const { proxy } = getCurrentInstance();

import { useAvatarInfoStore } from "@/stores/AvatarInfoStore";
const avatarInfoStore = useAvatarInfoStore()

const preview = computed(() => {
    return props.modelValue instanceof File
})

const props = defineProps({
    modelValue: {
        type: [String, Object],  // 本地缓存图片是路径，新上传的图片是对象
        default: null,
    },
})

const localFile = ref(null)

const emit = defineEmits(["avatarCover"])

/* 上传文件，将头像文件发送给主进程，文件操作需要主进程来 */
const uploadImage = async (file) => {
    file = file.file
    // 将文件路径发送给主进程，由主进程生成缩略图，然后返回头像流和缩略图的流
    const { avatarStream, coverStream } = await myApi.createAvatarCover(file.path)
    const avatarBlob = new Blob([avatarStream], { type: "image/png" })
    const avatarFile = new File([avatarBlob], "avatar.jpg")
    const coverBlob = new Blob([coverStream], { type: "image/png" })
    const coverFile = new File([coverBlob], "cover.jpg")
    // 展示缩略图
    let img = new FileReader()
    img.readAsDataURL(coverFile)
    img.onload = (data) => {
        localFile.value = data.target.result
    }
    // 将文件传递给父组件
    emit("avatarCover", { avatarFile, coverFile })
}

</script>

<style lang="scss" scoped>
.avatar-upload {
    display: flex;
    justify-content: center;
    align-items: end;
    line-height: normal;

    .avatar-show {
        background: #ededed;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        overflow: hidden;
        position: relative;

        .icon-ic_image_upload {
            font-size: 30px;
            color: #a3a3a3;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
        }

        .img {
            width: 100%;
            height: 100%;
        }

        .op {
            position: absolute;
            color: #0e8aef;
            top: 80px;
        }
    }

    .select-btn {
        vertical-align: bottom;
        margin-left: 5px;
    }
}
</style>
